<template>
    <div style="border:1px solid rgb(202, 202, 202);margin:0 5px">
        <div style="padding:5px;border-bottom:1px solid rgb(202, 202, 202);font-weight:700;height:43px;line-height:31px">
            <span v-show="type == 'history'" style="margin-right:10px">
                同步时间：
                <el-date-picker
                    v-model="historyParam.syncDate"
                    clearable
                    @change="changeSyncDate"
                    value-format="yyyyMMdd"
                    size="mini"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
                <el-input
                    v-model="historyParam.codeAndName"
                    clearable
                    @clear="query"
                    size="mini"
                    style="width:220px;margin:0 10px"
                    placeholder="编号/名称"
                ></el-input>
                <el-button type="primary" size="mini" @click="query" style="margin-left:10px">查询</el-button>
            </span>
            <span v-show="tranParams.entryETL">
                导数结果：<span style="color:red"
                    >{{ typeof syncResult.etlResult === 'boolean' ? (syncResult.etlResult ? '成功' : '失败') : null }} &nbsp;&nbsp;
                </span>
            </span>
        </div>
        <el-row>
            <el-col :span="24" class="content">
                <RiskTable :msg="successMsg" class="table-height" @handleBtn="handleBtn"></RiskTable>
                <RiskPagination :paging="pagingSuccess" @page-change="pageChange('success', $event)"></RiskPagination>
            </el-col>
        </el-row>
        <yh-dialog
            :title="'历史同步明细'"
            :visible.sync="dialogVisible"
            width="900px"
            top="4vh"
            drag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="closeDialog"
        >
            <CurrentSyncContent type="detail" ref="detail" :outerAmount="outerAmount" :key="dialogKey"></CurrentSyncContent>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import RiskPagination from '@/common/components/risk-pagination.vue';
import RiskTable from '@/common/components/risk-table.vue';
import { getSyncDataList } from '@/pages/system-maintence/api';
import { Component, Prop, Vue } from 'vue-property-decorator';
import CurrentSyncContent from './current-sync-content.vue';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'HistorySyncContent',
    components: {
        RiskTable,
        CurrentSyncContent,
        RiskPagination,
    },
})
export default class HistorySyncContent extends Vue {
    @Prop({ default: 'current' }) type: string;
    @Prop() tranParams: any;
    pagingSuccess = {
        total: 0,
        currentPage: 1,
        pageSize: 25,
    };

    searchParams: any = {
        batchId: '',
        isNew: '',
        syncCategory: '1', // 1 条目同步 0 动态维度同步
        syncStatus: '', // 1 成功  0 失败
    };

    historyParam: any = {
        syncDate: '',
        codeAndName: '',
    };
    outerAmount = {
        totalAmount: 0,
        successAmount: 0,
        errorAmount: 0,
    };
    showHeight: string = 'calc(100vh - 250px)';
    dialogVisible: boolean = false;
    dialogKey: number = -1;
    synEventShowObj: any = {
        '0': '增量手动',
        '1': '全量手动',
        '2': '按类别手动',
        '3': '单个手动',
        '4': '监听自动',
        '5': '初始化自动',
    };
    // 成功条目
    columns = [
        // {
        //     name: '批次号',
        //     val: 'batchId',
        // },
        {
            name: '同步日期',
            val: 'dtCtDate',
            type: 'date',
        },
        { name: '同步时间', val: 'dtCtTime', type: 'time' },
        { name: '同步类型', val: 'synEventShow', type: 'status', statusKV: this.synEventShowObj },
        {
            name: '操作',
            type: 'btn',
            btns: [{ title: '查看', type: 'primary', icon: 'el-icon-view' }],
            width: '80px',
        },
    ];

    successMsg: any = {
        returnData: {},
        dataKey: 'list',
        title: this.columns,
        checked: { on: false, option: false },
        hidePage: true,
    };

    private syncResult: any = {
        totalAmount: '',
        successAmount: '',
        successEntry: '',
        errorAmount: '',
        errorEntry: '',
        errorMsg: '',
        etlResult: '',
    };
    private syncLoading: boolean = false;

    syncCategory: string = '';
    // 同步(id,同步状态:0 失败  1 成功,类型: 1 条目同步 0 动态维度同步)
    handleClickSync(syncCategory: string): void {
        this.syncLoading = true;
        // this.cleanLastResult();
        this.syncCategory = syncCategory;
        getSyncDataList({
            isNew: '0',
            syncDate: this.historyParam.syncDate,
            codeAndName: this.historyParam.codeAndName,
            paging: this.pagingSuccess,
            syncCategory,
        }).then(
            (res: any) => {
                this.pagingSuccess.total = res.total;
                this.$set(this.successMsg.returnData, 'list', res.list);
                this.syncLoading = false;
            },
            () => {
                this.syncLoading = false;
            }
        );
    }

    //  同步之前清空 之前的的同步结果 todo
    private cleanLastResult(): void {
        this.$set(this.successMsg.returnData, 'list', []);
    }

    // 成功分页
    private pageChange(type, data) {
        this.handleClickSync(this.syncCategory);
    }

    // 查询点击
    query() {
        this.pagingSuccess.currentPage = 1;
        this.handleClickSync(this.syncCategory);
    }

    // 同步时间改变(一键清除)
    changeSyncDate(value) {
        console.log(value, '---');
        if (value === null) {
            this.query();
        }
    }
    // 点击行回调函数
    handleBtn({ type, row }) {
        let title = type;
        if (title == '查看') {
            this.dialogVisible = true;
            this.outerAmount = {
                totalAmount: row.totalAmount,
                successAmount: row.successAmount,
                errorAmount: row.errorAmount,
            };
            this.$nextTick(() => {
                (this.$refs['detail'] as any).handleClickSync('0', false, this.syncCategory, 'userAction', row.batchId);
                (this.$refs['detail'] as any).handleClickSync('1', false, this.syncCategory, 'userAction', row.batchId);
            });
        }
    }

    closeDialog() {
        this.dialogVisible = false;
        this.dialogKey++;
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-table td,
/deep/ .el-table th {
    padding: 5px 0;
}
.content {
    &:nth-child(1) {
        border-right: 1px solid rgb(202, 202, 202);
    }
    height: calc(100vh - 170px);
    .content-header {
        height: 30px;
        line-height: 28px;
        padding: 3px;
    }
    .table-height {
        margin: 8px;
        height: calc(100% - 70px) !important;
    }
}
/deep/ .el-dialog .el-dialog__body {
    max-height: 90vh !important;
}
/deep/ .el-input--mini .el-input__icon {
    line-height: 31px;
}
</style>
